﻿<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
.layerlogin {
	font-size: 16px !important;
	display: none;
}

.layerlogin .login-top li {
	width: 50% !important;
	font-size: 18px !important;
}

.layerlogin .layui-tab-title li {
	padding: 0px;
}

.layerlogin .layui-tab-content .login-con {
	margin-top: 30px;
}

.layerlogin .layui-tab-content .login-con input {
	width: 100%;
	height: 50px;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
}

.layerlogin .layui-tab-content .login-con button {
	width: 100%;
	height: 50px;
	border-radius: 5px;
	font-size: 16px;
}

.dropdown{
	position: relative;
	display: inline-block;
	z-index: 999;
    float: right;
    width:100px;
    text-align:center;
    margin-top:5px;
}
.dropdown img{
	border-radius: 50%;
	width:50px;
}
.dropdown .dropdown-content{
	display: none;
	position: absolute;
	min-width: 120px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	background: #fff;
	z-index: 999;
	border-radius: 10px;
}
.dropdown .dropdown-content ul li{
	padding: 10px;
	text-align: center;
	border-radius: 5px;
	line-height: 24px;
}
.dropdown:hover{
	color: #000;
}
.dropdown .dropdown-content ul li:hover{
	background-color:rgb(73, 132, 236);
	cursor: pointer;
	color: #fff;
}
.dropdown:hover .dropdown-content{
	display: block;
}
.zhixinyun{
	width: 50px;
	text-align: center;
	background: #fff;
	padding: 10px 5px;
	font-size: 16px;
	color: #fff;
	border-radius: 10px !important;
	position: fixed;
	right: 20px;
	bottom: 60px;
	background: rgb(73, 132, 236);
}
.zhixinyun:hover{
	color: #fff;
}
</style>
</head>
<body>
	<!--顶部导航栏Start-->
	<div class="top-welconme">
		<a href="javascript:">欢迎访问SiXian心理健康网站</a>
		<%-- <c:if test="${fontuser!=null }">
			<!-- <a id="btnlogout" href="logout.action" class="flo-right">退出登录</a> -->
			<a href="javascript:" class="flo-right dropdown">${fontuser.username }
				<div class="dropdown-content">
					<ul>
						<li id="dropdownli1">个人信息</li>
						<li id="dropdownli2">我的消息</li>
						<li id="dropdownli3">退出登录</li>
					</ul>
				</div>
			</a>
		</c:if> --%>
		<c:if test="${fontuser==null }">
			<a id="btnregister" href="javascript:" class="flo-right">注册</a>
			<a id="btnlogin" href="javascript:" class="flo-right">登录</a>
		</c:if>
	</div>
	<a href="http://zhixinyun.com/PSYHealthCloudPlatform/html/Login.jsp" class="zhixinyun">之心云入口</a>
	<div class="tpt-header">
		<div class="tpt-wp cl">
			<input id="nav-btn" type="checkbox"> <label
				class="tpt-nav-btn" for="nav-btn"></label>
			<div class="tpt-logo">
				<a href="loadhomepage.action"><img src="img/raw_1524814356.png"
					width="232px" height="66px" /></a>
			</div>
			<ul id="tptnavul" class="tpt-nav">
				<li><a href="loadhomepage.action" id="tabnavlia1" class="tpt-nav-li"
					style="color: #fff;">首页</a>
					<ul id="navmaindefaultul" class="tpt-nav-ul"
						style="display: block;"></ul></li>
				<li><a href="loadpsychichealth.action" id="tabnavlia2" class="tpt-nav-li">心理健康热点</a>
					<ul id="navpsychichealthli" class="tpt-nav-ul"></ul></li>
				<li><a href="loadknowledgeservice.action" id="tabnavlia3" class="tpt-nav-li">知识服务</a>
					<ul id="navknowledgeserviceli" class="tpt-nav-ul"></ul></li>
				<li><a href="javascript:" class="tpt-nav-li">专家园地</a>
					<ul class="tpt-nav-ul"></ul></li>
				<li><a href="javascript:" class="tpt-nav-li">心理测试</a>
					<ul class="tpt-nav-ul"></ul></li>
				<li><a href="javascript:" class="tpt-nav-li">咨询服务</a>
					<ul class="tpt-nav-ul"></ul></li>
				<!-- <li><a href="javascript:" class="yun">之心云入口</a></li> -->
			</ul>
			
			<c:if test="${fontuser!=null }">
				<a href="javascript:" class="flo-right dropdown">
					<div style="line-height:20px">
						<c:if test="${fontuser.headPortrait != null }">
							<img src="${fontuser.headPortrait}"/>
						</c:if>
						<c:if test="${fontuser.headPortrait == null }">
							<img src="img/n-avator-bg.png"/>
						</c:if>
						<span style="color:#fff">${fontuser.username }</span>
					</div>
					<div class="dropdown-content">
						<ul>
							<li id="dropdownli1">个人信息</li>
							<li id="dropdownli2">我的消息</li>
							<li id="dropdownli4">测评记录</li>
							<li id="dropdownli3">退出登录</li>
						</ul>
					</div>
				</a>
			</c:if>
		</div>
	</div>
	<!--顶部导航栏End-->

	<!-- 登录注册弹窗Start -->
	<div id="layerlogin" class="layerlogin">
		<div class="layui-tab layui-tab-brief" style="margin: 0px 40px;"
			lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title login-top">
				<li id="layerlilogin" class="layui-this">登录</li>
				<li id="layerliregister">注册</li>
			</ul>
			<div class="layui-tab-content">
				<div id="layerlogincon" class="layui-tab-item layui-show">
					<div class="login-con">
						<input id="inploginusername" type="text" name="title"
							autocomplete="off" placeholder="请输入手机号码" class="layui-input">
						<input id="inploginpwd" type="password" name="title"
							autocomplete="off" placeholder="请输入密码" class="layui-input">
						<div class="layui-row">
							<div class="layui-col-md9 layui-col-xs7">
								<input id="inploginsavecode" type="text" name="title"
									autocomplete="off" placeholder="请输入验证码" class="layui-input"
									style="positent">
							</div>
							<div class="layui-col-md2 layui-col-xs4">
								<img id="savecodeimg" src="safecode.do" width="100px"
									height="40px" title="看不清"
									style="border-radius: 5px;cursor: pointer;margin-top: 2px;" />
							</div>
						</div>
						<button id="btnloginsubmit" class="layui-btn layui-btn-fluid">登录</button>
					</div>
				</div>
				<div id="layerregistercon" class="layui-tab-item">
					<div class="login-con">
						<input id="registerusername" name="registerusername" type="text"
							autocomplete="off" placeholder="请输入手机号码" class="layui-input">
						<input id="registerpwd" name="registerpwd" type="password"
							autocomplete="off" placeholder="请输入密码" class="layui-input">
						<div style="width: 60%; float: left;">
							<input id="registersavecode" name="registersavecode" type="text"
								autocomplete="off" placeholder="请输入验证码" class="layui-input">
						</div>
						<div style="float: right; width: 35%;">
							<button id="btngetregistersavecode"
								class="layui-btn  layui-btn-primary layui-btn-fluid">获取验证码</button>
						</div>
						<button id="btnaddfontuser" class="layui-btn layui-btn-fluid">注册</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 登录注册弹窗End -->
	<script src="js/jquery-3.3.1.js"></script>
	<script src="layui/layui.all.js" charset="utf-8"></script>
	<script src="js/md5.js"></script>
	<script src="js/Constant.js"></script>
	<script>
	layui.use('layer', function() {
		var $ = layui.jquery,
			layer = layui.layer;

		//导航栏切换
		$("#tptnavul li").click(function(){
			$(this).children().css("color","#fff");
			$(this).siblings().children().css("color","#000");
		});
		
		// 验证手机号
		function isPhoneNo(phone) {
			var pattern = /^1[34578]\d{9}$/;
			return pattern.test(phone);
		}

		//点击获取验证码，弹出一个六位数的数字
		$("#btngetregistersavecode").click(function() {
			var phone = $("#registerusername").val();
			if (phone == null || phone == "") {
				layer.msg("请输入手机号", {
					icon : 2
				});
				return false;
			}
			if (isPhoneNo(phone) == false) {
				layer.msg("请输入正确的手机号", {
					icon : 2
				});
				return false;
			}
			$.ajax({
				type : "get",
				url : "phonesavecode",
				datatype : "json",
				success : function(data) {
					if (data != null) {
						layer.alert(data, {
							icon : 1,
							title : "验证码"
						});
					} else {
						layer.alert("000000", {
							icon : 1
						});
					}
				},
				error : function() {}
			});
		});
		//点击注册
		$("#btnaddfontuser").click(function() {
			var phone = $("#registerusername").val();
			var pwd = $("#registerpwd").val();
			var phonesavecode = $("#registersavecode").val();
			if (phone == null || phone == "") {
				layer.msg("请输入手机号", {
					icon : 2
				});
				$("#registerusername").focus();
				return false;
			}
			if (isPhoneNo(phone) == false) {
				layer.msg("请输入正确的手机号", {
					icon : 2
				});
				$("#registerusername").focus();
				return false;
			}
			if (pwd == "") {
				layer.msg("请输入密码", {
					icon : 2
				});
				$("#registerpwd").focus();
				return false;
			}
			if (pwd.length < 6 || pwd.length > 18) {
				layer.msg("请输入6-18位的密码", {
					icon : 2
				});
				$("#registerpwd").focus();
				return false;
			}
			if (phonesavecode == null || phonesavecode == "") {
				layer.msg("请输入验证码", {
					icon : 2
				});
				$("#registersavecode").focus();
				return false;
			}
			if (phonesavecode.length != 6) {
				layer.msg("验证码不符合规范", {
					icon : 2
				});
				$("#registersavecode").focus();
				return false;
			}
			
			/**
			 * 2019-1-7徐震霖修改添加
			 */
			if (pwd.length < 6 || pwd.length > 18) {
				layer.msg('密码长度不符合规范!');
				return;
			}

			/**
			 * 2019-1-7徐震霖修改添加
			 */
			var enpwd = hex_md5(fix(Encryption_key, pwd));
			$("#registerpwd").val(enpwd);
			
			$.ajax({
				type : "get",
				url : "register.action?phone=" + phone + "&pwd=" + enpwd + "&phonesavecode=" + phonesavecode,
				datatype : "json",
				success : function(data) {
					if (data.code == 10001) {
						layer.confirm(data.msg, {
							btn : [ '确定' ],
							icon : 1
						}, function() {
							layer.closeAll();
							$(".layerlogin").css("display", "none");
						});
					} else {
						layer.alert(data.msg, {
							icon : 2
						});
					}
				},
				error : function() {}
			});
		});

		$("#btnlogin").click(function() {
			$("#layerlilogin").addClass("layui-this");
			$("#layerliregister").removeClass("layui-this");
			$("#layerlogincon").addClass("layui-show");
			$("#layerregistercon").removeClass("layui-show");
			layerlogin();
		});
		$("#btnregister").click(function() {
			$("#layerlilogin").removeClass("layui-this");
			$("#layerliregister").addClass("layui-this");
			$("#layerlogincon").removeClass("layui-show");
			$("#layerregistercon").addClass("layui-show");
			layerlogin();
		});

		function layerlogin() {
			layer.open({
				type : 1,
				title : ' ', //不显示标题栏
				area : [ '500px', '430px' ],
				resize : false,
				shade : 0.8,
				id : 'LAY_layuipro', //设定一个id，防止重复弹出
				btnAlign : 'c',
				moveType : 0, //拖拽模式，0或者1
				content : $('#layerlogin'),
				cancel : function() {
					$(".layerlogin").css("display", "none");
				}
			});
		}

		/* 点击更换验证码 */
		var verifyimg = $('#savecodeimg').attr('src');
		$('#savecodeimg').click(function() {
			$(this).attr('src', verifyimg + '?random=' + Math.random());
		});

		//点击登录
		$("#btnloginsubmit").click(function() {
			var username = $("#inploginusername").val();
			var pwd = $("#inploginpwd").val();
			var savecode = $("#inploginsavecode").val();

			/**
			 * 2019-1-7徐震霖修改添加
			 */
			if (pwd.length < 6 || pwd.length > 18) {
				layer.msg('密码长度不符合规范!');
				return;
			}

			/**
			 * 2019-1-7徐震霖修改添加
			 */
			var enpwd = hex_md5(fix(Encryption_key, pwd));
			$("#inploginpwd").val(enpwd);

			$.ajax({
				type : "get",
				url : "login.action?username=" + username + "&pwd=" + enpwd + "&savecode=" + savecode,
				datatype : "json",
				success : function(data) {
					if (data.code == 10001) {
						window.location.reload();
					} else if (data.code == 10003) {
						layer.msg(data.msg, {
							icon : 2
						});
					} else {
						layer.msg(data.msg, {
							icon : 2
						});
					}
				},
				error : function() {
					layer.msg("登录失败", {
						icon : 2
					});
				}
			});
		});

		$(".tpt-nav li").click(function() {
			$(".tpt-nav li ul").css("display", "none")
			$(this).find("ul").css("display", "block");
		});
		
		/* 点击用户下拉框事件  djf添加2019、5、14 */

		$("#dropdownli1").click(function(){
			window.location.href="personalMessage.jsp";
		});
		$("#dropdownli3").click(function(){
			window.location.href="logout.action";
		});
		$("#dropdownli4").click(function(){
			window.location.href="evaluationRecords.jsp";
		});
	});
	</script>
</body>
</html>